<template>
	<el-dialog title="服务维护" :visible.sync="dialogVisible" width="1000px" @close="handleClose"
		:close-on-click-modal="false" append-to-body="true">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>服务维护</span>
		</div>

	
	<div class="smp-result smp_panel_1" style="margin-top: -10px;">
		<div class="smp_panel_header">
			<div class="smp_panel_pre"></div>
			<div class="smp_panel_title">基础信息</div>
		</div>
		<div class="smp-search smp_panel_body">
			
			<el-descriptions size="mini" :column="4" border>
				<el-descriptions-item label="申请类型">
					{{form.requireType|dictName("SMP0013")}}
				</el-descriptions-item>
				
				<el-descriptions-item label="交易名称">
					{{form.transName}}
				</el-descriptions-item>
				<el-descriptions-item label="交易码">
					{{form.transCode}}
				</el-descriptions-item>
				<el-descriptions-item label="系统名称">
					{{form.systemNo|getSystemName}}
				</el-descriptions-item>
				<el-descriptions-item label="系统编号">
					{{form.systemNo}}
				</el-descriptions-item>
				 <el-descriptions-item label="所属机构">
					{{form.systemNo|getOrgNameBySystemNo}}
				</el-descriptions-item>
				
				<el-descriptions-item label="报文协议">
					{{form.msgAgreement}}
				</el-descriptions-item>
				<el-descriptions-item label="报文编码">
					{{form.msgCode|dictName("SMP0004")}}
				</el-descriptions-item>
				<el-descriptions-item label="Http请求方法">
					{{form.httpMethed}}
				</el-descriptions-item>
				
				<el-descriptions-item label="服务编码">
					{{form.busCode}}
				</el-descriptions-item>
				<el-descriptions-item label="外部可见">
					{{form.outShow|dictName("SMP0015")}}
				</el-descriptions-item>
				
				<el-descriptions-item label="ESB地址">
					<!-- {{form.esbAddr|dictName("SMP0016")}} -->
					{{form.esbAddr|getESBEnvironment(that)}}
				</el-descriptions-item>
				<el-descriptions-item label="新交易码">
					{{form.newTransCode}}
				</el-descriptions-item>
				<el-descriptions-item label="测试URL" :span="3">
					{{form.testAddr}}
				</el-descriptions-item>
				
				<!-- <el-descriptions-item label="生产URL">
					{{form.prodAddr}}
				</el-descriptions-item> -->
				<el-descriptions-item label="功能简介" :span="4">
					{{form.funIntr}}
				</el-descriptions-item>
				
				<el-descriptions-item label="修改说明" :span="4">
					{{form.remark}}
				</el-descriptions-item>
				
				<!-- <el-descriptions-item label="业务路由">
					{{row.busPath}}
				</el-descriptions-item> -->
				
			</el-descriptions>
			
			
			
			
			<!-- <el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form" :rules="rules" :disabled="true">
				<el-row>
					<el-col :span="24">
						<el-col :span="8">
							<el-form-item label="申请类型:" >
								<el-select v-model="form.requireType" style="width: 100%"   
								placeholder="申请类型" 
								@change="typeChange"  :disabled="requireTypeDisable">
									<el-option v-for="item in dict('SMP0013')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col> 
						
						<el-col :span="8">
							<el-form-item label="交易码:" prop="transCode">
								<el-input v-model="form.transCode" :disabled="transCodeDisabled" placeholder="交易码"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="8">
							<el-form-item label="交易名称:" prop="transName">
								<el-input v-model="form.transName" placeholder="交易名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="所属系统:" prop="systemNo">
								<el-select v-model="form.systemNo" disabled style="width: 100%" filterable remote reserve-keyword
									placeholder="请输入系统编号或名称" :remote-method="getsystems" >
									<el-option v-for="item in systemListAll" :key="item.systemNo" :label="item.systemName"
										:value="item.systemNo">
										<span style="float: left;margin-left: 3px;">{{ item.systemNo }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.systemName }}</span>
									</el-option>
								</el-select>
								
							</el-form-item>
						</el-col>
						
						<el-col :span="8">
							<el-form-item label="机构号:" prop="systemOrg">
								<el-input v-model="form.systemOrg" placeholder="机构号"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="8">
							<el-form-item label="报文协议:" prop="msgAgreement">
								 <el-input v-model="form.regProtocol" placeholder="报文协议" :fetch-su></el-input> 
							<el-autocomplete placeholder="请选择或输入报文协议"  style="width: 100%;" :fetch-suggestions="fetchProtocal" v-model="form.msgAgreement" class="inline-input"></el-autocomplete>
							</el-form-item>
						</el-col>
						
						<el-col :span="8">
							<el-form-item label="报文编码:" prop="msgCode">
							<el-select v-model="form.msgCode" style="width: 100%" placeholder="报文编码">
								<el-option v-for="item in dict('SMP0004')" :key="item.itemCode" :label="item.itemName"
									:value="item.itemCode">
								</el-option>
							</el-select>
							
							</el-form-item>
						</el-col>
						
						<el-col :span="8">
							<el-form-item label="外部可见:" prop="outShow">
								<el-select v-model="form.outShow" style="width: 100%" placeholder="外部可见">
									<el-option v-for="item in dict('SMP0015')" :key="item.itemCode" :label="item.itemName"
										:value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						
						<el-col :span="8">
							<el-form-item label="ESB地址:" prop="esbAddr">
							<el-select v-model="form.esbAddr" style="width: 100%" placeholder="ESB地址(测试)">
								<el-option v-for="item in dict('SMP0016')" :key="item.itemCode" :label="item.itemName"
									:value="item.itemCode">
								</el-option>
							</el-select>
							
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="测试URL:" prop="testAddr">
								<el-input v-model="form.testAddr" placeholder="服务系统测试URL"></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="24">
							<el-form-item label="生产URL:" prop="prodAddr">
								<el-input v-model="form.prodAddr" placeholder="服务系统生产URL"></el-input>
							</el-form-item>
						</el-col>
						
						
						
						<el-col :span="24">
							<el-form-item label="功能简介:" prop="funIntr">
								<el-input type="textarea"  :rows="2" v-model="form.funIntr" placeholder="功能简介"></el-input>
							</el-form-item>
						</el-col>
						
						
					</el-col>
				</el-row>
			</el-form> -->
			</div>
		</div>
		<div>
			
		<div class="smp-result smp_panel_1">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">服务字段</div>
			</div>
		<div class="smp-search smp_panel_body innerTabs_1">
			<el-tabs >
				<el-tab-pane label="请求字段">
			<el-table class="fieldList" :data="requestFieldList.slice((requestFieldCurrentPage-1)*requestFieldPageSize,requestFieldCurrentPage*requestFieldPageSize)"  size="mini"   stripe  style="width: 100%" v-if="list1show">
				<el-table-column prop="orderNumber" label="序号" align="center" width="60"></el-table-column>
				<el-table-column prop="fieldCode" label="字段代码" align="center"></el-table-column>
				<el-table-column prop="fieldName" label="字段名称" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column prop="parentType" label="父节点" align="center"></el-table-column>
				
				<el-table-column prop="nodeType" label="节点类型" align="center"  width="80">
					 <template slot-scope="scope">
						{{scope.row.nodeType|dictName("SMP0017")}}
					</template> 
				</el-table-column>
				
				<el-table-column prop="fieldType" label="字段类型"  width="80"  align="center" >
					 <template slot-scope="scope">
						{{scope.row.fieldType|dictName("SMP0018")}}
					</template> 
				</el-table-column>
				
				<el-table-column prop="fieldLength" label="长度"  width="80"  align="center"></el-table-column>
				<el-table-column prop="fieldRequire" width="80" align="center" label="是否必输">
					<template slot-scope="scope">
						{{scope.row.fieldRequire|dictName("SMP0015")}}
					</template>
					
				</el-table-column>
				
				<el-table-column prop="struct" label="报文结构" align="center" >
					 <template slot-scope="scope">
						{{scope.row.struct|dictName("SMP0019")}}
					</template> 
				</el-table-column>
				
				<!-- <el-table-column prop="inOut" width="80" label="输入/输出" >
					 <template slot-scope="scope">
						{{scope.row.inOut|dictName("SMP0020")}}
					</template> 
				</el-table-column> -->
				
				<el-table-column prop="fieldEdsc" show-overflow-tooltip label="字段描述"></el-table-column>
				
			</el-table>
			<div class="smp-pagination" >
					<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="requestFieldPageSize" :page-sizes="[5,10,20]" :total="requestFieldList.length" :current-page="requestFieldCurrentPage" @current-change = "requestFieldCurrentChange" @size-change="requestFieldSizeChange">
					</el-pagination>
			</div>
			</el-tab-pane>
			
			<el-tab-pane label="响应字段">
			<el-table class="fieldList" :data="responseFieldList.slice((responseFieldCurrentPage-1)*responseFieldPageSize,responseFieldCurrentPage*responseFieldPageSize)"  size="mini"  stripe  style="width: 100%" v-if="list1show">
				
				<el-table-column prop="orderNumber" label="序号" align="center" width="60"></el-table-column>
				<el-table-column prop="fieldCode" label="字段代码" align="center"></el-table-column>
				<el-table-column prop="fieldName" label="字段名称" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column prop="parentType" label="父节点" align="center"></el-table-column>
				
				<el-table-column prop="nodeType" label="节点类型" align="center"  width="80">
					 <template slot-scope="scope">
						{{scope.row.nodeType|dictName("SMP0017")}}
					</template> 
				</el-table-column>
				
				<el-table-column prop="fieldType" label="字段类型"  width="80"  align="center" >
					 <template slot-scope="scope">
						{{scope.row.fieldType|dictName("SMP0018")}}
					</template> 
				</el-table-column>
				
				<el-table-column prop="fieldLength" label="长度"  width="80"  align="center"></el-table-column>
				<el-table-column prop="fieldRequire" width="80" align="center" label="是否必输">
					<template slot-scope="scope">
						{{scope.row.fieldRequire|dictName("SMP0015")}}
					</template>
					
				</el-table-column>
				
				<el-table-column prop="struct" label="报文结构" align="center" >
					 <template slot-scope="scope">
						{{scope.row.struct|dictName("SMP0019")}}
					</template> 
				</el-table-column>
				
				<!-- <el-table-column prop="inOut" width="80" label="输入/输出" >
					 <template slot-scope="scope">
						{{scope.row.inOut|dictName("SMP0020")}}
					</template> 
				</el-table-column> -->
				
				<el-table-column prop="fieldEdsc" show-overflow-tooltip label="字段描述"></el-table-column>
				
			</el-table>
			<div class="smp-pagination" >
					<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="responseFieldPageSize" :page-sizes="[5,10,20]" :total="responseFieldList.length" :current-page="responseFieldCurrentPage" @current-change = "responseFieldCurrentChange" @size-change="responseFieldSizeChange">
					</el-pagination>
				</div>
			</el-tab-pane>
			</el-tabs>
			</div>
			</div>
		
		</div>
	<!-- 	<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="closeDialog">确认</el-button>
		</span> -->
		
			<addApplyField ref="addApplyField" @addApplyField="addApplyField" @updateApplyField="updateApplyField"/>
			<addServerView ref="addServerView" @addServerView="addServerView" />	
					
	</el-dialog>
</template>

<script>
	"use strict";
	import {addSystemInfo} from '@/api/service.js';
	import {getFieldByServer} from '@/api/field.js';
	import addApplyField from '@/view/demandApplication/addApplyField.vue'
	import addServerView from '@/view/demandApplication/addServerView.vue';
	import {getServerCheck} from '@/api/demand.js';
	import {getEsbEnvironmentByEsbFlg} from '@/api/environment.js';
	export default {
		data() {
			return {
				esbEnvironmentList: [],
				that:this,
				index:0,
				type:'add',
				dialogVisible: false,
				list1show: true,
				requireTypeDisable:false,
				transCodeDisabled:false,
				
				requestFieldList:[],
				responseFieldList:[],
				//请求字段分页信息
				requestFieldCurrentPage:1,
				requestFieldPageSize:5,
				responseFieldCurrentPage:1,
				responseFieldPageSize:5,
				
				
				form: {
					 requireType:'01',
					 transName: '',
					 transCode: '',
					 systemNo: '',
					 systemOrg:'',
					 msgAgreement: '',
					 msgCode: '',
					 testAddr: '',
					 prodAddr: '',
					 esbAddr:'',
					 outShow:'01',
					 funIntr:'',
					 remark:'',
					 applyFieldList:[], 
				},
				rules:{
					transCode: [{
						required: true,
						message: '请输入交易码',
						trigger: 'blur'
					}],
					transName: [{
						required: true,
						message: '请输入交易名称',
						trigger: 'blur'
					}],
					systemNo:[{
						required: true,
						message: '服务系统',
						trigger: 'blur'
					}],
					msgAgreement: [{
						required: true,
						message: '请输入报文协议',
						trigger: 'blur'
					}],
					msgCode: [{
						required: true,
						message: '请选择报文编码',
						trigger: 'blur'
					}],
					esbAddr: [{
						required: true,
						message: '请选择ESB地址',
						trigger: 'blur'
					}],
					testAddr: [{
						required: true,
						message: '请输入测试路径',
						trigger: 'blur'
					}],
					outShow: [{
						required: true,
						message: '请输入外部可见',
						trigger: 'blur'
					}],
				}
			};
		},
		components: {
			addApplyField,
			addServerView
		},
		created() {
			this.getEsbEnvironmentList();
		},
		
		filters: {
			getESBEnvironment: function(ip,that) {
			
				let esbEnvironment =  that.esbEnvironmentList.filter(item=>item.ip==ip)[0];
				return esbEnvironment.ip +"(" + that.dictName(esbEnvironment.esbFlg,'SMP0031') +")";
			}
		},
				
		methods: {
			getEsbEnvironmentList() {
				getEsbEnvironmentByEsbFlg({}).then(response => {
					this.esbEnvironmentList = response.data.extend;
				})
			},
						
			requestFieldCurrentChange(val){
				
				this.requestFieldCurrentPage = val
			},
			requestFieldSizeChange(val){
				this.requestFieldCurrentPage = 1
				this.requestFieldPageSize = val
			},
			
			responseFieldCurrentChange(val){
				this.responseFieldCurrentPage = val
			},
			responseFieldSizeChange(val){
				this.responseFieldCurrentPage = 1
				this.responseFieldPageSize = val
			},
			
			fetchProtocal(queryString,cb){
			var protocals = [{value:"socket/xml"},{value:"http/json"},{value:"http/soap"},{value:"https/json"},{value:"定长"},{value:"分隔符"},{value:"其他"}];
				
				var protocals1 =
				protocals1  = queryString? protocals.filter(item=>{
					return item.value.indexOf(queryString)>-1;
				}):protocals;
				cb(protocals1);
			},

			onSubmit() {
				this.$refs["form"].validate(valid=>{
					if(valid){
						
						let data = {};
						Object.assign(data,this.form);
						
						//校验
						getServerCheck({"transCode":data.transCode,"systemNo":data.systemNo,"applyId":data.applyId,"requireType":data.requireType}).then(response => {
							if(response.data.code=='0000'){
								
								if(this.type=='add'){
									this.$emit('addApplyServer',data);
								}else{
									this.$emit('updateApplyServer',data,this.index);
								}
								
								this.dialogVisible = false;
							}else{
								this.$message.error(response.data.message);
							}
						}).catch(error => {
							console.info("失败");
							console.info(error.message);
						});
						this.$refs["form"].resetFields();
					}else{
						return false;
					}
					});
				
				
			
			},

			reset() {
				this.$refs["form"].resetFields();
				this.form.applyFieldList =[];
				
			},

			showDialog(systemNo) {
				
				 let system = this.$store.getters.getSystem(systemNo);
				  Object.assign(this.form,system);
				//  console.info(system)
				this.type='add';
				this.dialogVisible = true;
				this.form.requireType="01";
				this.requireTypeDisable = false;
				this.form.applyFieldList =[];
				this.transCodeDisabled = false;
			},
			
			showDialog2(row,index) {
				this.type='update';
				this.index = index;
				this.form = row;
				this.requestFieldList = this.form.applyFieldList.filter(item=>item.inOut=='01');
				this.responseFieldList = this.form.applyFieldList.filter(item=>item.inOut=='02');
				this.dialogVisible = true;
				this.requireTypeDisable = true;
				this.transCodeDisabled = true;
			},
			
			closeDialog() {
				this.$refs["form"].resetFields();
				this.dialogVisible = false;
			},

			handleClose() {
				this.dialogVisible = false;
			},
			
			
			//添加
			createApplyField() {
				this.$refs.addApplyField.showDialog();
			},
			
			addApplyField(item) {
			
				this.form.applyFieldList.push(item);
			},
			updateApplyField(item, index) {
				this.list1show = false;
				this.form.applyFieldList[index] = item;
				this.$nextTick(() => {
					this.list1show = true;
				});
			},
			
			handleEdit1(index, row) {
				let row1 = {};
				Object.assign(row1, row);
				this.$refs.addApplyField.showDialog2(row1, index);
			},
			
			delrole1(index, row) {
				this.form.applyFieldList.splice(index, 1);
			},

			typeChange(val){
				this.requireTypeDisable = true;
				if(val!="01"){
					this.$refs.addServerView.showDialog(this.form.systemNo);
				}
			},
			
			addServerView(row){
				Object.assign(this.form,row);
				//带出服务字段
				getFieldByServer({"transCode":this.form.transCode,"systemNo":this.form.systemNo}).then(response => {
					this.form.applyFieldList = response.data.extend.list
					
					this.requestFieldList = this.form.applyFieldList.filter(item=>item.inOut=='01');
					this.responseFieldList = this.form.applyFieldList.filter(item=>item.inOut=='02');
					
					this.transCodeDisabled = true;
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
				
				
			},
			
		},

	}
</script>

<style scoped>
	.detailsTitle {
		color: black;
		font-size: 18px;
		text-align: left;
		margin-top: 10px;
		margin-left: 15px;
		margin-bottom: 10PX;
		border-left: 3px solid #090;
		line-height: 24px;
		padding-left: 10px;
		color: #57595d;
	}
	
	.fieldList{
		min-height: 100px;
		max-height: 400px;
		overflow: auto;
	}
</style>
